<!-- 管理员:课程考核管理:题库和在线考试管理:在线考试:开始阅卷 -->
<template>
  <div style="width:100% !important;padding:20px;">
    <el-col :span=5>
      <div style="margin:5vh 0 5vh 0;">
        <div style="line-height: 4vh;"><span class="classTestLabel">考试课程：</span><span class="classTestDesc">{{ testDesc.clazzName }}</span></div>
        <div style="line-height: 4vh;"><span class="classTestLabel">课程编号：</span><span class="classTestDesc">{{ testDesc.clazzCode }}</span></div>
        <div style="line-height: 4vh;"><span class="classTestLabel">考试类型：</span><span class="classTestDesc">{{ testDesc.testTypeName }}</span></div>
        <div style="line-height: 4vh;"><span class="classTestLabel">试卷编号：</span><span class="classTestDesc">{{ testDesc.testCode }}</span></div>
      </div>
      <hr />
      <div style="margin:5vh 0 5vh 0;text-align:center;">
        <div class="testMarking">提 卡</div>
        <div class="testMarking"
             style="color: red;">在提卡处，可以任意进入没阅的题</div>
        <div style="padding:0 5vh;margin:2vh 0;">
          <table class="testMarkingQuestionsTable"
                 align="center"
                 style="width:100%;">
            <tr>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">1</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">2</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions testMarkedQuestions">3</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">4</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">5</span></td>
            </tr>
            <tr>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">6</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">7</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions testMarkedQuestions">8</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">9</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">10</span></td>
            </tr>
            <tr>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">11</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">12</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions testMarkedQuestions">13</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions">14</span></td>
              <td><span @click="onBtnMarkingQuestionHandling"
                      class="testMarkingQuestions testMarkedQuestions">15</span></td>
            </tr>
          </table>
        </div>
        <div style="padding:0 5vh;margin:2vh 0;"
             class="examinationScore">
          判卷 <input class="examinationScore"> 分
        </div>
        <div style="padding:0 5vh;margin:2vh 0;color: red;"
             class="examinationScore">
          实现客观题直接系统自动判卷，主动题老师辅助判卷
        </div>
      </div>
    </el-col>
    <el-col :span=15>
      <div style="margin:3vh 0 0 0;">
        <el-col :span=2>
          <div class="questionNo">{{ questionModel.num }}.</div>
        </el-col>
        <el-col :span=22>
          <div style="padding:0 10px 0 10px;">
            <div class="questionTitle"><span class="questionType"></span>{{ questionModel.title }}<span class="questionType"
                    style="display:inline-block;width:1.5vh;height:1.5vh;background-color:#51aff0;"></span></div>
            <div class="questionAnswer">{{ questionModel.answer }}</div>
            <div class="questionNextBtn">
              <el-button size="mini"
                         plain
                         style="height:28px;width:150px;"
                         type="success">下一题</el-button>
              <el-button size="mini"
                         plain
                         @click="Wancheng"
                         style="height:28px;width:150px;"
                         type="success">完成试卷</el-button>
            </div>
          </div>
        </el-col>
      </div>
    </el-col>
    <el-col :span=4>
      <div style="text-align:center;">
        <div class="photoContainer">
          <img class="photo" />
        </div>
        <div style="padding:0 5vh;margin:2vh 0;"
             class="classTestDesc">
          姓名：{{ examinee.name }}
        </div>
        <div style="padding:0 5vh;margin:2vh 0;"
             class="classTestDesc">
          学号：{{ examinee.code }}
        </div>
      </div>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testDesc: {
        clazzName: '期中计算机课程考试',
        clazzCode: '445514123344',
        testTypeName: '期中计算机',
        testCode: '12365478',
      },
      questionModel: {
        num: '10',
        title:
          '【论述题】试运用真理绝对性和真理相对性辩证统一关系的原理说明坚持和发展马克思主义的必要性。',
        answer:
          '绝对真理和相对真理的辩证统一关系\r\n第一、相互区别，二者是同一真理的两个不同的方面',
      },
      examinee: {
        name: '李思思',
        code: '123654365',
      },
      semesterArray: [
        { label: '2021下', value: '2021下' },
        { label: '2022上', value: '2022上' },
      ],
      queryForm: {
        semester: '',
      },
      resultPagin: {
        totalCount: 200,
        currentPage: 3,
        perPageCount: 50,
        start: 51,
        end: 100,
      },
      tableData: [{}, {}, {}],
    }
  },
  methods: {
    Wancheng() {
      this.$router.push({
        name: '查看考试',
      })
    },
    onBtnMarkingClickHandler: function () {},
    onBtnMarkingQuestionHandling: function () {
      this.$message('onBtnMarkingQuestionHandling')
    },
  },
}
</script>

<style lang="less" scoped>
.questionNextBtn {
  margin: 3vh 0 0 0;
  text-align: center;
}
.questionAnswer {
  margin: 3vh 0 0 0;
  height: 50vh;
  overflow: auto;
  line-height: 30px;
}
.questionTitle {
  font-size: 16px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
  line-height: 30px;
}
.questionType {
  font-size: 16px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  display: inline-block;
  color: #51aff0;
}
.questionNo {
  font-size: 16px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #51aff0;
  text-align: right;
  line-height: 30px;
}
.photoContainer {
  margin: 20vh 0 0 0;
}
.photo {
  background-color: pink;
  width: 15vh;
  height: 15vh;
}
.classTestLabel {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
  width: 15vh;
  display: inline-block;
  text-align: right;
}
.classTestDesc {
  font-size: 18px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #014da7;
}
.testMarking {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: center;
  line-height: 3vh;
  color: blue;
}
.testMarkingQuestions {
  display: inline-block;
  line-height: 4vh;
  background-color: #ffffff;
  width: 4vh;
  border: 2px solid #aaaaaa;
  border-radius: 4px;
  cursor: pointer;
}
.testMarkedQuestions {
  display: inline-block;
  color: #ffffff;
  line-height: 4vh;
  background-color: #53aff6;
  width: 4vh;
  border-radius: 4px;
  border: 2px solid #53aff6;
}
.testMarkingQuestionsTable {
  border-collapse: separate;
  border-spacing: 10px 10px;
}
div.examinationScore {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: center;
  line-height: 4vh;
  color: blue;
}
input.examinationScore {
  border-radius: 4px;
  border: 1px solid blue;
  width: 6vh;
  text-align: center;
  height: 3vh;
}
</style>
